<template>
	<view class="content flex flex-col">
		<NavBarVue title="牌阵"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="card flex flex-col">
					<text class="spread-title flex items-center justify-center">{{deckDetails.name}}</text>
					<view class="flex items-center sublime">
						<image src="@/static/icons/title.png" class="sublime-icon"></image>
						<text class="sublime-title flex-1">牌阵介绍</text>
						<text class="sublime-right">组阵用牌数<text>{{deckDetails.num}}</text>张</text>
					</view>
					<view class="describe">{{deckDetails.dess}}</view>
				</view>
				<view class="card info-content flex flex-col">
					<!-- 5,9,16,1,3,13,9,7,11,9,12,9,15,7,9 -->
					<spread1 v-if="deckDetails.signame == 'type9'" />
					<spread2 v-if="deckDetails.signame == 'type10'" />
					<spread3 v-if="deckDetails.signame == 'type11'" />
					<spread4 v-if="deckDetails.signame == 'type12'" />
					<spread5 v-if="deckDetails.signame == 'type1'" />
					<spread6 v-if="deckDetails.signame == 'type2'" />
					<spread7 v-if="deckDetails.signame == 'type3'" />
					<spread8 v-if="deckDetails.signame == 'type4'" />
					<spread9 v-if="deckDetails.signame == 'type5'" />
					<spread10 v-if="deckDetails.signame == 'type6'" />
					<spread11 v-if="deckDetails.signame == 'type13'" />
					<spread12 v-if="deckDetails.signame == 'type14'" />
					<spread13 v-if="deckDetails.signame == 'type15'" />
					<spread14 v-if="deckDetails.signame == 'type16'" />
					<spread15 v-if="deckDetails.signame == 'type7'" />
					<spread16 v-if="deckDetails.signame == 'type8'" />
					<view class="info-line flex items-center">
						<text>解读顺序</text>
						<text class="flex-1">{{deckDetails.ord}}</text>
					</view>
					<!-- <view class="info-line flex items-center">
						<text>牌阵类型</text>
						<text class="flex-1">123123</text>
					</view> -->
					<view class="info-line flex items-center">
						<text>适用范围</text>
						<text class="flex-1">{{deckDetails.applyrang}}</text>
					</view>
					<view class="info-line flex items-center">
						<text>备注</text>
						<text class="flex-1">{{deckDetails.remark}}</text>
					</view>
					<view class="info-line flex items-center">
						<text>解读提示</text>
						<text class="flex-1">{{deckDetails.exa}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		provide,
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import communityApi from '@/apis/apiList/communityApi';
	import testApi from '@/apis/apiList/testApi';
	import spread1 from './spread/spread1.vue';
	import spread2 from './spread/spread2.vue';
	import spread3 from './spread/spread3.vue';
	import spread4 from './spread/spread4.vue';
	import spread5 from './spread/spread5.vue';
	import spread6 from './spread/spread6.vue';
	import spread7 from './spread/spread7.vue';
	import spread8 from './spread/spread8.vue';
	import spread9 from './spread/spread9.vue';
	import spread10 from './spread/spread10.vue';
	import spread11 from './spread/spread11.vue';
	import spread12 from './spread/spread12.vue';
	import spread13 from './spread/spread13.vue';
	import spread14 from './spread/spread14.vue';
	import spread15 from './spread/spread15.vue';
	import spread16 from './spread/spread16.vue';

	const cardId = ref("")
	const deckId = ref("")
	const deckDetails = ref({})
	const cardList = ref([])
	const showFlag = ref(true)

	provide('cardList', cardList)
	provide('showFlag', showFlag)

	onLoad((option) => {
		console.log(option)
		cardId.value = option.id
		deckId.value = option.deckId
	})
	onShow(async () => {
		await getCardDetail()
		getDeckDetail()
	})
	const getCardDetail = async () => {
		const opt = {
			"id": cardId.value
		}
		await communityApi.membergetDrawCardsByid(opt).then(res => {
			cardList.value = res.data.cardlist
		})
	}
	const getDeckDetail = () => {
		const opt = {
			"id": deckId.value
		}
		testApi.getDeckInfoByid(opt).then(res => {
			deckDetails.value = res.data
		})
	}
</script>

<style>
	.content {
		padding: 0 20rpx 20rpx;
		gap: 20rpx;
	}

	.card {
		box-shadow: 0 2px 2px 1px rgba(49, 158, 255, .5);
		border-radius: 10rpx;
		background: #fff;
		padding: 20rpx;
	}

	.spread-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		background: #daf1ff;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.sublime {
		gap: 8rpx;
		height: 70rpx;
	}

	.sublime-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.sublime-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.sublime-right {
		font-size: 22rpx;
		color: #7b7c7d;
	}

	.sublime-title text {
		color: #946917;
		font-weight: bold;
	}

	.describe {
		font-size: 24rpx;
		line-height: 28rpx;
		color: #333;
		padding: 10rpx;
		border-radius: 10rpx;
		border: 1px dashed #a7d0de;
	}

	.info-content {
		box-shadow: none;
		gap: 20rpx;
	}

	.info-line {
		gap: 10rpx;
		line-height: 24rpx;
	}

	.info-line text:nth-child(1) {
		font-size: 24rpx;
		font-weight: bold;
		color: #333;
	}

	.info-line text:nth-child(2) {
		font-size: 23rpx;
		color: #797979;
		text-align: right;
	}
</style>